<template>
    <a-layout style="min-height: 100vh" has-sider>
        <LeftMenu ref="leftMenuRef" v-model:collapsed="collapsed" />
        <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px',transition: 'all 0.2s' }">
            <a-layout-header style="background: #fff;" >
                <index-title ref="indexTitle" />
            </a-layout-header>
            <a-layout-content style="margin: 0 16px; height: calc( 100vh - 155px );overflow: auto; margin-top: 20px">
                <div :style="{ padding: '24px', background: '#fff', height: '100%', overflow: 'auto', }">
                    <RouterView />
                    <div v-show="showSubContainer" id="userAppContainer"></div>
                </div>
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                就是个测试呀！ <a-date-picker v-model:value="time" :picker="type" @panelChange="panelChange" />
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import LeftMenu from './left-menu/left-menu.vue'
import IndexTitle from './title/index-title.vue'
import { useRoute } from 'vue-router';

const collapsed = ref<boolean>(false)
const time = ref<string>('')
const leftMenuRef = ref<InstanceType<typeof LeftMenu> | null>(null)
const indexTitle = ref<InstanceType<typeof IndexTitle> | null>(null)
const route = useRoute()
// 只有显示子应用时，才在页面上显示子应用容器
const showSubContainer = ref<boolean>(!!route.meta.isSubApp)
watch(
    () => !!route.meta.isSubApp,
    newValue => showSubContainer.value = newValue
)
setInterval(function() {
    console.log('index ==> leftMenuRef:', leftMenuRef, "==> leftMenuRef.value", leftMenuRef.value)
}, 10000)

const panelChange = (value: any, mode: any) => {
  console.log("panelChange=========================================",value, mode)
}
const modes = ['time', 'year','week']
const type = ref<string>('time')
let i = 0
setInterval(() => {
    i++;
  type.value= modes[i%3]
}, 10000)
</script>
<style scoped lang="scss">

:deep(.ant-layout-footer){
    padding-top: 6px;
    padding-bottom: 6px;
}
#userAppContainer{
    height: 100%;
    :deep(> div){
        // 给 qianku 窗口一个高度
        height: 100%;
    }
}
</style>